<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>论坛</title>

    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/locale/bootstrap-table-zh-CN.min.js"></script>

</head>
<body class="container">
<br/>
<br/>
<!--导航栏-->
<div>
    <!--个人信息-->
    <div style="float:left; width: 20%">
        <form class="form-horizontal" action="/user/info" method="post">
            <!--id-->
            <input type="hidden" name="uid" th:value="${user.uid}"/>
            <input type="submit" value="个人信息" style="width: 100%" class="btn btn-info"/>
        </form>
    </div>

    <!--睡眠计划-->
    <div style="float:left; width: 20%">
        <form class="form-horizontal" action="/user/plan" method="post">
            <!--id-->
            <input type="hidden" name="uid" th:value="${user.uid}"/>
            <input type="submit" value="睡眠计划" style="width: 100%" class="btn btn-info"/>
        </form>
    </div>
    <!--睡眠记录-->
    <div style="float:left; width: 20%">
        <form class="form-horizontal" action="/sleep/list" method="post">
            <!--id-->
            <input type="hidden" name="uid" th:value="${user.uid}"/>
            <input type="submit" value="睡眠记录" style="width:100%" class="btn btn-info"/>
        </form>
    </div>
    <!--论坛-->
    <div style="float:left; width: 20%">
        <form class="form-horizontal" action="/comment/list" method="post">
            <!--id-->
            <input type="hidden" name="uid" th:value="${user.uid}"/>
            <input type="submit" value="论坛" style="width: 100%; background-color: red" class="btn btn-info"/>
        </form>
    </div>

    <!--登录的用户信息-->
    <div style="float:right; width: 20%">
                <input type="hidden" id="uid" th:value="${user.uid}">
        <h3 th:text="'欢迎您:'+${user.nickname}"/>
    </div>
</div>
<br/><br/>
<!--模糊查询 + 睡眠记录按钮 的 js-->
<script>
    $(function () {
        $("#sleepList").click(function () {
            let sType = $("#sType").val();
            let uid = $("#uid").val();
            $.post("/sleep/list",
                {
                    uid: uid
                }
            );
        });
    });
</script>

<br/>
<!--表格内容-->
<div>
    <script src="../../layer/layer.js"></script>
    <!--bootstrapTable表头-->
    <div>
        <table id="comment-table" class="table table-striped table-bordered"></table>
    </div>

    <!--bootstrapTable内容-->
    <script>
        $(function () {
            function getIsFineString(value, row, index) {
                let isFine = row.isFine;
                if (isFine) {
                    return [
                        '<span>加精</span>'
                    ].join('');
                } else {
                    return [
                        '<span>普通</span>'
                    ].join('');
                }
            }

            function addInfoOperateBtn(value, row, index) {
                return [
                    '<button id="info" type="button" class="btn btn-default">详细信息</button>'
                ].join('');
            }


            window.infoEvents = {
                //详情按钮的绑定事件
                'click #info': function (e, value, row, index) {
                    //父话题的cid
                    let cid = row.cid;
                    //用户的uid
                    let uid = $("#uid").val();
                    $(location).attr('href', '/comment/info?uid=' + uid + '&cid=' + cid);
                }
            }

            function addDeleteOperateBtn(value, row, index) {
                return [
                    '<button id="delete" type="button" class="btn btn-default">删除</button>'
                ].join('');
            }


            window.deleteEvents = {
                //删除按钮的绑定事件
                'click #delete': function (e, value, row, index) {
                    let cid = row.cid;
                    layer.confirm("确认要删除吗，删除后不能恢复", {title: "确认删除"}, function (index) {
                        layer.close(index);
                        let windowId = layer.load();
                        $.get("/comment/delete-data", {cid: cid}, function (data) {
                            layer.close(windowId);
                            data = eval("(" + data + ")");
                            layer.msg("<em style='color:red'>" + data.result + "</em>", {icon: 6});
                            $("#comment-table").bootstrapTable('refresh', "/comment/list-data");
                        });
                    });
                }
            };

            $("#comment-table").bootstrapTable({
                url: "/comment/list-data",//数据地址
                striped: true,//是否显示行的间隔
                pageNumber: 1,//初始化加载第几页
                pagination: true,//是否分页
                sidePagination: 'server',
                pageSize: 5,
                pageList: [5, 10, 20],
                showRefresh: true,
                queryParams: function (params) {
                    var temp = {
                        offset: params.offset,
                        limit: params.limit,
                        pageSize: params.pageSize
                    };
                    return temp;
                },
                columns: [
                    {
                        title: "编号",
                        field: "cid",
                        sortable: true
                    },
                    {
                        title: "昵称",
                        field: "nickname",
                        sortable: false
                    },
                    {
                        title: "内容",
                        field: "cContent",
                        sortable: false
                    },
                    {
                        title: "发表时间",
                        field: "cDate",
                        sortable: false
                    },
                    {
                        title: "是否加精",
                        field: "isFine",
                        // sortable: false,
                        formatter: getIsFineString//将代号转为文字
                    },
                    {
                        title: '详情',
                        field: 'info',
                        events: infoEvents,//给按钮注册事件
                        formatter: addInfoOperateBtn//表格中增加按钮
                    }
                    // ,
                    // {
                    //     title: '删除',
                    //     field: 'delete',
                    //     events: deleteEvents,//给按钮注册事件
                    //     formatter: addDeleteOperateBtn//表格中增加按钮
                    // }
                ]
            });
        });
    </script>

</div>
</div>
</body>
</html>